import React , { useEffect, useState } from 'react';
import { Upload, Button, message ,Spin ,Alert} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import reqwest from 'reqwest';
import {getWorkshop,getWells,setWells } from '../../utils/storageUtils';
import Axios from 'axios';

const UploadForm = (props)=> {
  const [fileList , setFileList ] = useState ([]);
  const [uploading , setUploading ] = useState (false);
  const [spin , setSpin ] = useState (false);

  // useEffect(()=>{
  //   if(fileList.length==3){
  //     message.info("文件数量多出三个将默认进行删除，请分批次操作！")
  //   }else if(fileList.length>3){
  //     message.error("文件数量多出三个,默认删除最后一个上传文件")
  //     const newFileList = fileList.slice();
  //     newFileList.splice(fileList.length-1, 1);
  //     setFileList(newFileList)
  //   }
  // },[JSON.stringify(fileList)])

  const handleUpload = () => {
    const formData = new FormData();
    fileList.map(file=>{
      let type = file.name.split(".")[1];
      
      if(type=='xml'){
        formData.append('file', file);
      }else if(type == 'mp4'){
        formData.append('video', file);
      }else if(type == 'srt'){
        formData.append('srt', file);
      }else{
        message.error("上传文件类型不正确")
      }
    })
    // console.log(fileList,formData)
    // fileList.forEach(file => {
    //   formData.append('files[]', file);
    // });

    // console.log(fileList)
      
    formData.append('drill_id', getWells().drill_id);
    formData.append('org_id', getWells().drill_org_id);
    formData.append('ws_id', getWells().drill_ws_id);
    
    if(fileList.length === 0) {
      message.warning("请选择要上传的文件!");
    }
    else{
      setSpin(true)
      Axios.defaults.baseURL='http://47.104.167.113:8081/data/management/document/upload'
      Axios({
          method: 'post',
          url: 'http://47.104.167.113:8081/data/management/document/upload',
          data: formData,
          headers: { "Content-Type": "multipart/form-data"}
      }).then(({data}) => {
        console.log("上传文件",data)
        if(data.code === 200){
          message.success("上传成功!");
          props.cancel();
        }else{
          message.error("上传失败!");
        }
        setSpin(false)
      }).catch((err) =>{
        message.error("请求失败!");
      })
    }
    
  };
  const config = {
    onRemove: file => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList)
    },
    beforeUpload: file => {
      setFileList([...fileList,file])
      return false;
    },
    fileList,
  };

  return (
    
    <div style={{width:480 ,height : 200}}>
      <Spin tip="Loading..." spinning={spin}>
        {spin&&
          <Alert
            message="加载中"
            description="文件上传需要一定的时间，请耐心等待."
            type="info"
          />
        }
        <Upload {...config}  maxCount={3} multiple>
          <span style={{color:'red',marginRight:10}}>* 上传文件</span><Button icon={<UploadOutlined />}>文件 ( xml )  视频 ( mp4 )  字幕 ( srt ) 格式</Button>
        </Upload>
        <Button
          type="primary"
          onClick={handleUpload}
          disabled={fileList.length === 0}
          loading={uploading}
          style={{ marginTop:40,marginLeft:200}}
        >
          上传
        </Button>
      </Spin>
      
    </div>
  )

}

export default UploadForm;
